<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { useFaultTypeForm, useGetFaultTypeDetail } from '@/services/pages/know/fault'
  import { FormInstance } from 'element-plus'
  import { ref, watch } from 'vue'

  const { faultTypeForm, faultTypeSaveLoading, faultTypeSave, resetFaultTypeForm } =
    useFaultTypeForm()
  const { faultTypeDetail, getFaultTypeDetailLoading, getFaultTypeDetail } = useGetFaultTypeDetail()

  defineOptions({
    name: 'DialogFaultTypeAdd',
  })

  const props = defineProps({
    faultTypeId: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('visible', { type: Boolean, default: false })

  // 表单校验规则
  const rules = ref({
    name: [{ required: true, message: '请输入类型名称', trigger: ['change', 'blur'] }],
  })

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  /**
   * 取消事件
   */
  const onCancel = () => {
    resetFaultTypeForm()
    visible.value = false
  }

  /**
   * 确定事件
   */
  const onConfirm = async () => {
    if (formInstance.value) {
      try {
        await formInstance.value.validate()
        const res = await faultTypeSave()
        if (res.code === 20000) {
          HMessage.success(infoTip.know.fault.type.saveSuccess)
          emits('update')
          onCancel()
          return
        }
        HMessageBox.error(infoTip.know.fault.type[res.code] || res.message)
      } catch (error) {
        // 参数错误
      }
    }
  }

  /**
   * 状态更新事件
   */
  const onChangeStatus = () => {
    faultTypeForm.value.status = !faultTypeForm.value.status
  }

  watch(
    visible,
    async (value) => {
      if (value) {
        if (props.faultTypeId) {
          await getFaultTypeDetail(props.faultTypeId)
          faultTypeForm.value = faultTypeDetail.value
        }
      }
    },
    { immediate: true },
  )
</script>

<template>
  <h-dialog
    v-model="visible"
    :title="props.faultTypeId ? '编辑类型' : '新增类型'"
    :width="800"
    :loading="faultTypeSaveLoading || getFaultTypeDetailLoading"
  >
    <el-form
      ref="formInstance"
      label-position="top"
      inline-message
      :rules="rules"
      :model="faultTypeForm"
      class="modal_form_content"
    >
      <el-form-item label="类型名称" prop="name">
        <el-input
          v-model.trim="faultTypeForm.name"
          placeholder="请输入类型名称"
          maxlength="20"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型状态" class="same_line">
        <div class="switch-container">
          <el-switch
            :model-value="!faultTypeForm.status"
            size="small"
            @change="onChangeStatus"
          ></el-switch>
          {{ !faultTypeForm.status ? '启用' : '禁用' }}
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="onCancel">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  .switch-container {
    height: 16px !important;
    display: flex;
    align-items: center;
    column-gap: 5px;
  }
</style>
